<script setup>
import {LOGIN_ROUTE} from "@/router/routes/login/login.js";
import {ERROR_ROUTE} from "@/router/routes/error/error.js";
import {HOME_ROUTE} from "@/router/routes/home/home.js";
import {ref, watch, computed, watchEffect} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {CATEGORY_ROUTE} from "@/router/routes/category/category.js";
import {CATEGORY_PRODUCT_LIST_ROUTE} from "@/router/routes/category/CategoryProductList.js";
import {PRODUCT_ROUTE} from "@/router/routes/product/product.js";
import {MY_ROUTE} from "@/router/routes/my/my.js";
import {SETTING_ROUTE} from "@/router/routes/setting/setting.js";
import {UPDATE_AVATAR_ROUTE} from "@/router/routes/setting/UpdateAvatar.js";
import {UPDATE_AVATAR_BG_ROUTE} from "@/router/routes/setting/UpdateAvatarBg.js";
import {UPDATE_USERNAME_ROUTE} from "@/router/routes/setting/UpdateUsername.js";
import {CAR_ROUTE} from "@/router/routes/car/car.js";
import {MORE_ROUTE} from "@/router/routes/more/more.js";
import {PERSONAL_ROUTE} from "@/router/routes/personal/personal.js";
import {UPDATE_PWD_ROUTE} from "@/router/routes/setting/UpdatePwd.js";
import {UPDATE_USER_INFO_ROUTE} from "@/router/routes/setting/UpdateUserInfo.js";
import {ADDRESS_LIST_ROUTE} from "@/router/routes/address/AddressList.js";
import {ADD_ADDRESS_ROUTE} from "@/router/routes/address/AddAddress.js";
import {EDITOR_ADDRESS_ROUTE} from "@/router/routes/address/EditorAddress.js";
import {ORDER_ROUTE} from "@/router/routes/order/order.js";
import {PAY_ROUTE} from "@/router/routes/order/pay.js";
import useOrderStore from "@/store/modules/OrderStore.js";
import {getAllOrderAPI} from "@/api/order.js";
import {ORDER_LIST_ROUTE} from "@/router/routes/order/OrderList.js";
import {ORDER_DETAIL_ROUTE} from "@/router/routes/order/OrderDetail.js";
import {SEARCH_ROUTE} from "@/router/routes/search/search.js";
import {SEARCH_LIST_ROUTE} from "@/router/routes/search/SearchList.js";
import {COMMENT_ROUTE} from "@/router/routes/order/comment.js";
import {COMPLETE} from "@/constants/OrderStatus.js";
import {MY_COMMENT_ROUTE} from "@/router/routes/my/MyComment.js";
import {MY_COMMENT_DETAIL_ROUTE} from "@/router/routes/my/MyCommentDetail.js";
import {LIU_YAN_ROUTE} from "@/router/routes/liu/LiuYan.js";
import {MY_LIU_YAN_ROUTE} from "@/router/routes/liu/MyLiuYan.js";
import {WRITE_LIU_YAN_ROUTE} from "@/router/routes/liu/WriteLiuYan.js";

const route = useRoute()
const router = useRouter()

// **********************
// * 底部 tabbar 激活路由 *
// **********************
const tabbarActive = ref('')
const homeActive = [HOME_ROUTE]
const categoryActive = [
  CATEGORY_ROUTE,
  CATEGORY_PRODUCT_LIST_ROUTE
]
const moreActive = [MORE_ROUTE]
const carActive = [CAR_ROUTE]
const myActive = [MY_ROUTE]
watch(
    () => route.name,
    (routeName) => {
      if (homeActive.includes(routeName)) {
        tabbarActive.value = HOME_ROUTE
      } else if (categoryActive.includes(routeName)) {
        tabbarActive.value = CATEGORY_ROUTE
      } else if (moreActive.includes(routeName)) {
        tabbarActive.value = MORE_ROUTE
      } else if (carActive.includes(routeName)) {
        tabbarActive.value = CAR_ROUTE
      } else if (myActive.includes(routeName)) {
        tabbarActive.value = MY_ROUTE
      }
    }
)

// **********************
// * 底部 tabbar 隐藏显示 *
// **********************
const disableTabbarRouteNames = [
  ERROR_ROUTE,
  LOGIN_ROUTE,
  PRODUCT_ROUTE,
  SETTING_ROUTE,
  UPDATE_AVATAR_ROUTE,
  UPDATE_AVATAR_BG_ROUTE,
  UPDATE_USERNAME_ROUTE,
  PERSONAL_ROUTE,
  UPDATE_PWD_ROUTE,
  UPDATE_USER_INFO_ROUTE,
  ADDRESS_LIST_ROUTE,
  ADD_ADDRESS_ROUTE,
  EDITOR_ADDRESS_ROUTE,
  ORDER_ROUTE,
  PAY_ROUTE,
  ORDER_LIST_ROUTE,
  ORDER_DETAIL_ROUTE,
  SEARCH_ROUTE,
  SEARCH_LIST_ROUTE,
  COMMENT_ROUTE,
  MY_COMMENT_ROUTE,
  MY_COMMENT_DETAIL_ROUTE,
  LIU_YAN_ROUTE,
  MY_LIU_YAN_ROUTE,
  WRITE_LIU_YAN_ROUTE,
]
const tabberDisable = computed(() => {
  return !disableTabbarRouteNames.includes(route.name)
})

// **********************
// * 底部 tabbar 选项点击 *
// **********************
const tabbarOnChange = (index) => {
  router.push({name: index})
}

const waitCnt = ref(0)
watchEffect(() => {
  waitCnt.value = 0
  useOrderStore().all.forEach(
      item => {
        if (item.status > 0 && item.status !== COMPLETE) waitCnt.value++
      }
  )
  waitCnt.value = waitCnt.value > 99 ? '99+' : waitCnt.value
  waitCnt.value = waitCnt.value === 0 ? '' : waitCnt.value
})
</script>

<template>
  <van-tabbar v-if="tabberDisable" v-model="tabbarActive" @change="tabbarOnChange" fixed placeholder>
    <van-tabbar-item :name="HOME_ROUTE" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item :name="CATEGORY_ROUTE" icon="list-switch">分类</van-tabbar-item>
    <van-tabbar-item :name="MORE_ROUTE" icon="list-switching">更多</van-tabbar-item>
    <van-tabbar-item :name="CAR_ROUTE" icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item :name="MY_ROUTE" icon="user-o" :badge="waitCnt">我的</van-tabbar-item>
  </van-tabbar>
</template>

<style scoped lang="scss">

</style>